import * as React from 'react';
import {useParams, useNavigate, useMatch, useSearchParams, useLocation} from 'react-router-dom'
import querystring from "querystring"
import WithRouterDemo from "./WithRouterDemo";

export const Main = (props) => {
    // console.log(props)
    const [search, setSearch] = useSearchParams();
    let location = useLocation();
    // console.log(search)

    console.log(querystring.parse(location.search))
    const searchLo = querystring.parse(location.search)
    let navigate = useNavigate();


    // push是叠加的上次页面依然存在内存中
    const clickHandler = (e) => {
        console.log("回到home页面", e)
        console.log(props)
        navigate("/")

    }
    // replace是替换上一次的内容不存在
    const clickHandler1 = () => {
        navigate("/", {replace: true})
    }
    return (
        <div>
            <h2>{search.get('id')}</h2>
            <h2>{searchLo["?id"]}</h2>
            <button onClick={clickHandler}>回到home页面</button>
            <button onClick={clickHandler1}>回到home页面replace</button>
            <WithRouterDemo></WithRouterDemo>
        </div>
    );
};

